<template>
  <div>
    <tiny-grid ref="basicGrid" seq-serial :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" :data="tableData">
      <tiny-grid-column type="index" width="60"></tiny-grid-column>
      <tiny-grid-column type="selection" width="50"></tiny-grid-column>
      <tiny-grid-column field="name" show-overflow title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
      <tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
      <tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
      <tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input', autoselect: true }" show-overflow></tiny-grid-column>
    </tiny-grid>
    <tiny-pager
      :current-page="custPager.currentPage"
      :page-size="custPager.pageSize"
      :total="custPager.total"
      :page-sizes="[5, 10, 20, 50]"
      @current-change="currentChange"
      @size-change="sizeChange"
      layout="sizes, total, prev, pager, next, jumper"
    ></tiny-pager>
  </div>
</template>

<script>
import { Grid, GridColumn, Pager } from '@opentiny/vue'

export default {
  components: {
    TinyGrid: Grid,
    TinyGridColumn: GridColumn,
    TinyPager: Pager
  },
  data() {
    return {
      custPager: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
      tableData: [],
      mockData: [
        {
          id: '1',
          name: 'GFD科技公司',
          userId: 421000103624183,
          area: '华东区',
          province: '福建省',
          city: '福州',
          contact: '许生',
          telephone: '1234567890',
          address: '福州',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 800,
          created_date: '2014-04-30 00:56:00',
          boole: false,
          assets: '1000000',
          rate: 0.9
        },
        {
          id: '2',
          name: 'WWW科技公司',
          userId: 421000103624183,
          area: '华南区',
          province: '广东省',
          city: '深圳',
          contact: '朱生',
          telephone: '1234567890',
          address: '深圳福田区',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 300,
          created_date: '2016-07-08 12:36:22',
          boole: true,
          assets: '1500000',
          rate: 0.7
        },
        {
          id: '3',
          name: 'RFV有限责任公司',
          userId: 441047913162396,
          area: '华南区',
          province: '广东省',
          city: '中山',
          contact: '秦生',
          telephone: '1234567890',
          address: '中山市',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 1300,
          created_date: '2014-02-14 14:14:14',
          boole: false,
          assets: '1500000',
          rate: 0.6
        },
        {
          id: '4',
          name: 'TGB科技公司',
          userId: 655783272594485,
          area: '华东区',
          province: '福建省',
          city: '龙岩',
          contact: '周生',
          telephone: '1234567890',
          address: '龙岩',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 360,
          created_date: '2013-01-13 13:13:13',
          boole: true,
          assets: '1200000',
          rate: 0.5
        },
        {
          id: '5',
          name: 'YHN科技公司',
          userId: 655783272594485,
          area: '华南区',
          province: '广东省',
          city: '韶关',
          contact: '郑生',
          telephone: '1234567890',
          address: '韶关',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 810,
          created_date: '2012-12-12 12:12:12',
          boole: true,
          assets: '1500000',
          rate: 0.6
        },
        {
          id: '6',
          name: 'WSX科技公司',
          userId: 441047913162396,
          area: '华中区',
          province: '湖北省',
          city: '黄冈',
          contact: '陈生',
          telephone: '1234567890',
          address: '黄冈',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 800,
          created_date: '2011-11-11 11:11:11',
          boole: true,
          assets: '1500000',
          rate: 0.6
        },
        {
          id: '7',
          name: 'KBG物业公司',
          userId: 421000103624183,
          area: '华中区',
          province: '湖北省',
          city: '赤壁',
          contact: '王二',
          telephone: '1234567890',
          address: '赤壁',
          introduction:
            '公司治理结构严格按现代企业制度设计，管理机构设置合理，制度完善，各部门分工明确、协作顺畅。拥有中、高级职称或大学本科以上学历的人员占职工总人数的80%以上，具有雄厚的资金实力和高度专业化的项目开发管理能力，是一支具有强烈的社会责任感和引领房地产业科技创新的地产新军。',
          employees: 400,
          created_date: '2016-04-30 23:56:00',
          boole: false,
          assets: '2000000',
          rate: 0.7
        },
        {
          id: '8',
          name: 'SZ市福德宝网络技术公司',
          userId: 421000103624183,
          address: '厦门岛内',
          area: '华东区',
          assets: '2000000',
          boole: true,
          city: '厦门',
          contact: '李四',
          created_date: '2016-06-03 13:53:25',
          employees: 540,
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          province: '福建省',
          rate: 0.6,
          telephone: '1234567890'
        },
        {
          id: '9',
          name: 'UJM有限责任公司',
          userId: 421000103624183,
          area: '华南区',
          province: '广西省',
          city: '南宁',
          contact: '段生',
          telephone: '1234567890',
          address: '南宁',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 750,
          created_date: '2014-04-21 11:56:00',
          boole: true,
          assets: '1500000',
          rate: 0.6
        },
        {
          id: '10',
          name: 'IKA有限责任公司',
          userId: 421000103624183,
          area: '华南区',
          province: '广西省',
          city: '北海',
          contact: '谭生',
          telephone: '1234567890',
          address: '北海',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 400,
          created_date: '2014-09-30 00:56:00',
          boole: false,
          assets: '110000',
          rate: 0.11
        },
        {
          id: '11',
          name: 'TIG管理公司',
          userId: 421000103624183,
          area: '华南区',
          province: '广西省',
          city: '桂林',
          contact: '陈生',
          telephone: '1234567890',
          address: '桂林',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 900,
          created_date: '2014-11-30 00:56:00',
          boole: true,
          assets: '120000',
          rate: 0.13
        },
        {
          id: '12',
          name: 'GGT科技公司',
          userId: 441047913162396,
          area: '西南区',
          province: '云南省',
          city: '昆明',
          contact: '周生',
          telephone: '1234567890',
          address: '昆明',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 500,
          created_date: '2014-03-20 02:50:00',
          boole: false,
          assets: '100000',
          rate: 0.1
        },
        {
          id: '13',
          name: 'YYS公司',
          userId: 441047913162396,
          area: '西南区',
          province: '云南省',
          city: '西双版纳',
          contact: '廖生',
          telephone: '1234567890',
          address: '西双版纳',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 985,
          created_date: '2015-07-28 11:37:00',
          boole: true,
          assets: '120000',
          rate: 0.12
        },
        {
          id: '14',
          name: 'VBN有限责任公司',
          userId: 421000103624183,
          area: '西南区',
          province: '云南省',
          city: '大理',
          contact: '欧生',
          telephone: '1234567890',
          address: '大理',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 598,
          created_date: '2014-04-30 00:56:00',
          boole: false,
          assets: '220000',
          rate: 0.22
        },
        {
          id: '15',
          name: 'SZ万众科技公司',
          userId: 441047913162396,
          area: '华中区',
          province: '湖北省',
          city: '武汉',
          contact: '阮生',
          telephone: '1234567890',
          address: '武汉',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 725,
          created_date: '2014-04-30 00:56:00',
          boole: true,
          assets: '2500000',
          rate: 0.8
        },
        {
          id: '16',
          name: 'SZ云创信息技术公司',
          userId: 421000103624183,
          area: '华中区',
          province: '湖北省',
          city: '十堰',
          contact: '邓生',
          telephone: '1234567890',
          address: '十堰',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 632,
          created_date: '2014-07-30 02:44:00',
          boole: true,
          assets: '3000000',
          rate: 0.85
        },
        {
          id: '17',
          name: 'SZ明乐餐饮管理公司',
          userId: 441047913162396,
          area: '华中区',
          province: '湖北省',
          city: '潜江',
          contact: '罗生',
          telephone: '1234567890',
          address: '潜江',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 246,
          created_date: '2013-04-30 00:56:00',
          boole: false,
          assets: '2000000',
          rate: 0.7
        },
        {
          id: '18',
          name: 'ZH忆兰居科技公司',
          userId: 441047913162396,
          area: '华南区',
          province: '广东省',
          city: '珠海',
          contact: '黄生',
          telephone: '1234567890',
          address: '珠海香洲区',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 592,
          created_date: '2014-05-30 01:00:00',
          boole: false,
          assets: '1800000',
          rate: 0.66
        },
        {
          id: '19',
          name: 'ZH万家医疗科技公司',
          userId: 441047913162396,
          area: '华南区',
          province: '广东省',
          city: '广州',
          contact: '刘生',
          telephone: '1234567890',
          address: '广州天河区',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 851,
          created_date: '2014-04-29 08:56:00',
          boole: false,
          assets: '100000',
          rate: 0.1
        },
        {
          id: '20',
          name: 'DG亿聚礼品公司',
          userId: 421000103624183,
          area: '华中区',
          province: '湖北省',
          city: '襄阳',
          contact: '范生',
          telephone: '1234567890',
          address: '襄阳',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
          employees: 394,
          created_date: '2014-04-28 10:56:00',
          boole: true,
          assets: '400000',
          rate: 0.4
        }
      ]
    }
  },
  methods: {
    currentChange(current) {
      this.custPager.currentPage = current
      this.fetchData()
    },
    sizeChange(size) {
      this.custPager.pageSize = size
      this.fetchData()
    },
    fetchData() {
      this.getData({ page: this.custPager }).then(({ result, page }) => {
        this.tableData = result
        this.custPager.total = page.totalRows
      })
    },
    getData({ page }) {
      return new Promise((resolve) => {
        // 此处服务为 自定义服务, page, sort, data, filters可获取当前表格的分页、排序、过滤等信息发送至服务端
        // mock remote server
        const startIndex = (page.currentPage - 1) * page.pageSize
        const allData = this.mockData
        const data = {
          result: allData.slice(startIndex, startIndex + page.pageSize),
          page: { ...page, totalRows: allData.length }
        }

        resolve({ result: data.result, page: data.page })
      })
    }
  },
  created() {
    this.fetchData()
  }
}
</script>
